<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <title>单位列表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.picker.min.css"/>
    <!--<link rel="stylesheet" href="css/chaosong.css">-->
    	<style type="text/css">
    		html { font-size: 20px; }
			/*Note3*/
			@media only screen and (min-width: 360px) { html { font-size: 22px !important; } }
			/*iPhone5*/
			@media only screen and (min-width: 320px) { html { font-size: 18px !important; } }
			/*iPhone6*/
			@media only screen and (min-width: 375px) { html { font-size: 23px !important; } }
			/*iPhone6 plus*/
			@media only screen and (min-width: 414px) { html { font-size: 25px !important; } }
			/*big Resolution*/
			@media only screen and (min-width: 641px) { html { font-size: 25px !important; } }
			body { background-color: #fff; }
			
			section { width: 100%; background-color: #fff; }
			
			.box_head { border-bottom: .3rem #f5f3f3 solid; }
			
			.search_head { width: 95%; margin-right: auto; margin-left: auto; padding: .5rem 0; }
			.search_head input { width: 73%; border: none; border-radius: 5rem; background: #f5f3f3 url("img/search_icon.png") no-repeat; background-position: 25% 50%; padding: .3rem 0; font-size: .75rem; text-align: center; vtical-align: middle; }
			.search_head input:-ms-input-placeholder { text-align: center; }
			.search_head input::-webkit-input-placeholder { text-align: center; }
			.search_head button { width: 25%; border: none; background-color: #0f88ed; color: #fff; padding: .3rem 0; border-radius: 5rem; font-size: .75rem; }
			
			.adress { width: 95%; border-bottom: 1px #e5e5e5 solid; margin-right: auto; margin-left: auto; }
			.adress .demo--label { margin: .6rem; display: inline-block; }
			.adress .demo--radio { display: none; }
			.adress .demo--radioInput { background-color: #fff; border: 2px solid rgba(0, 0, 0, 0.15); border-radius: 100%; display: inline-block; height: .8rem; width: .8rem; vertical-align: middle; line-height: 1; position: relative; }
			.adress .demo--radio:checked + .demo--radioInput:after { background-color: #0f88ed; border-radius: 100%; content: ""; display: inline-block; height: .4rem; width: .4rem; position: absolute; top: .2rem; left: .21rem; }
			.demo-c:after{
				background-color: #0f88ed; border-radius: 100%; content: ""; display: inline-block; height: .4rem; width: .4rem; position: absolute; top: .2rem; left: .21rem;
			}
			.adress .demo--checkbox.demo--radioInput, .adress .demo--radio:checked + .demo--checkbox.demo--radioInput:after { border-radius: 0; }
			.adress .cont { width: 80%; padding: .3rem 0; }
			.adress .cont p { font-size: .75rem; line-height: .1rem; }
			
			.con-fi { font-size: 0.65rem !important; color: #898989; }
			
			.fl { float: left; }
			
			.fr { float: right; }
			
			.clear-float { clear: both; height: 0; line-height: 0; font-size: 0; overflow: hidden; }
			header span{
				font-size: .7rem;
			}
    	</style>
</head>
<body>
	<header class="nav">
		<i class="iconfont icon-fanhui" style="float: left;"></i>
	    <span>单位</span>
	</header>
	<section class="box_head">
	    <div class="search_head">
	        <input class="fl search" type="text" placeholder="输入关键字">
	        <button class="fr" onclick="check()">完成</button>
	        <div class="clear"></div>
	    </div>
	</section>
	<section>
	    <div class="adress">
	        <label class="demo--label fl">
	            <input class="demo--radio" type="checkbox" name="demo-radio" value="林文建1">
	            <span class="demo--radioInput">
	        </span>
	        </label>
	        <div class="cont fl">
	            <p class="con-fi">市住建局</p>
	            <p>林文建1</p>
	        </div>
	        <div class="clear"></div>
	    </div>
	
	    <div class="adress">
	        <label class="demo--label fl">
	            <input class="demo--radio" type="checkbox" name="demo-radio" value="林文建2">
	            <span class="demo--radioInput">
	        </span>
	        </label>
	        <div class="cont fl">
	            <p class="con-fi">市行政服务中心</p>
	            <p>林文建2</p>
	        </div>
	        <div class="clear"></div>
	    </div>
	
	    <div class="adress">
	        <label class="demo--label fl">
	            <input class="demo--radio" type="checkbox" name="demo-radio" value="林文建3">
	            <span class="demo--radioInput">
	        </span>
	        </label>
	        <div class="cont fl">
	            <p class="con-fi">市行政服务中心</p>
	            <p>林文建3</p>
	        </div>
	        <div class="clear"></div>
	    </div>
	</section>
	<script type="text/javascript" src="js/mui.min.js" ></script>
    <script type="text/javascript" src="js/mui.picker.min.js" ></script>
	<script type="text/javascript" src="bootstrap/js/jquery.min.js">
	</script>
	<script type="text/javascript">
		$(document).ready(function(){
			mui("body").on("tap",".date-select",function () {
	        	var self = this;
	            var optionsJson = this.getAttribute('data-options') || '{}';
	            var options = JSON.parse(optionsJson);
	            var picker = new mui.DtPicker(options);
	            picker.show(function (rs) {
	                rs.text = rs.text.replace(/-/g, "/");
	                console.log(self)
	//              $(self).val(rs.text);	
					self.value=rs.text;
	                picker.dispose();
	            });
	        });
//			$("input[name='demo-radio']").attr('type','radio');
//			$('.cont').click(function(){
////				var self=this;
////				$("input[name='demo-radio']").each(function(){
////					$(this).removeAttr('checked');
////				});
//				$("input[name='demo-radio']").removeAttr('checked');
//				$("input[name='demo-radio']").next().removeClass('demo-c');
//				$(this).prev().children().first().next().addClass('demo-c');
//				$(this).prev().children().first().attr('checked',true);
//			})
//				$("input[name='demo-radio']").removeAttr('checked');
//				$("input[name='demo-radio']").next().removeClass('demo-c');
			$('.adress').click(function(){
				if($(this).children().first().children().first().is(':checked')){
					$(this).children().first().children().first().removeAttr('checked');
					$(this).children().first().children().first().next().removeClass('demo-c');
				}else{
					$(this).children().first().children().first().next().addClass('demo-c');
					$(this).children().first().children().first().prop('checked',true);
				}
			})
			$('.search').on('input',function(){
				console.log($(this).val());
			})
		})
		/*checkedname为创办页面被点击栏目已有的值*/
		var checkedname=sessionStorage.getItem('checked');
		var checks;
		console.log(checkedname);
		if(checkedname){
			/*判断选中*/
			checks=checkedname.split(',');
			$("input[name='demo-radio']").each(function(){
				console.log($(this).val());
				console.log(checks.indexOf($(this).val()));
				if(checks.indexOf($(this).val())>-1){
					$(this).attr("checked",true);
				}
			})
		}
//		$("input[value="+"'"+checkedname+"'"+"]").checked=true;
		/*创办页面被点击栏目的id*/
		var pid=sessionStorage.getItem('pid');
		console.log(pid);
		function check(){
			var list=$("input[name='demo-radio']:checked").val();
			
			console.log($("input[name='demo-radio']"));
			var lists='';
			if(list=='' || list==undefined){
				alert('请选中一个！');
			}else{
				$("input[name='demo-radio']:checked").each(function(){
					console.log($(this).val());
					lists+=$(this).val()+',';
					console.log(lists);
				})
				/*名称为id,值为选中人名称，传回创办页面*/
				sessionStorage.setItem(pid,lists);
				console.log(sessionStorage.getItem(pid));
				window.location.replace('setup.html');
			}
		}
	</script>
</body>
</html>